<template>
  <!-- 应用根容器，使用自定义类名app-container -->
  <div class="app-container">
    <!-- 使用Element Plus的el-container组件作为主布局容器 -->
    <el-container class="main-container">
      <!-- 左侧边栏，使用Element Plus的el-aside组件 -->
      <el-aside width="220px" class="aside">
        <!-- Logo区域 -->
        <div class="logo-container">
          <h1 class="logo-title">VR 安全教育平台管理系统</h1>
        </div>
        <!-- 导航菜单，使用Element Plus的el-menu组件 -->
        <!-- 绑定当前路由路径作为默认激活菜单，启用路由模式 -->
        <el-menu
          :default-active="$route.path" 
          class="el-menu-vertical"
          router 
          background-color="#001529"  
          text-color="#fff"  
          active-text-color="#409EFF">  
          <!-- 仪表盘菜单项 -->
          <el-menu-item index="/dashboard">
            <el-icon><Odometer /></el-icon>  <!-- 使用Element Plus图标 -->
            <span>仪表盘</span>
          </el-menu-item>
          <!-- 用户管理菜单项 -->
          <el-menu-item index="/users">
            <el-icon><User /></el-icon>
            <span>用户管理</span>
          </el-menu-item>
          <!-- 行为分析菜单项 -->
          <el-menu-item index="/behavior">
            <el-icon><DataAnalysis /></el-icon>
            <span>行为分析</span>
          </el-menu-item>
          <!-- 反馈中心菜单项 -->
          <el-menu-item index="/feedback">
            <el-icon><ChatDotRound /></el-icon>
            <span>反馈中心</span>
          </el-menu-item>
          <!-- 系统配置菜单项 -->
          <el-menu-item index="/system">
            <el-icon><Setting /></el-icon>
            <span>系统配置</span>
          </el-menu-item>
          <!-- 安全知识题库菜单项 -->
          <el-menu-item index="/knowledge">
            <el-icon><Files /></el-icon>
            <span>安全知识题库</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      
      <!-- 右侧主内容区域 -->
      <el-container>
        <!-- 顶部导航栏，使用Element Plus的el-header组件 -->
        <el-header height="60px" class="header">
          <div class="header-left">
            <!-- 面包屑导航，使用Element Plus的el-breadcrumb组件 -->
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item v-if="$route.meta.title">{{ $route.meta.title }}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="header-right">
            <!-- 用户头像下拉菜单，使用Element Plus的el-dropdown组件 -->
            <el-dropdown trigger="click">
              <div class="avatar-container">
                <el-avatar :size="32" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                <span class="username">管理员</span>
                <el-icon><CaretBottom /></el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>
                    <el-icon><User /></el-icon>个人信息
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-icon><Setting /></el-icon>设置
                  </el-dropdown-item>
                  <el-dropdown-item divided>
                    <el-icon><SwitchButton /></el-icon>退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        
        <!-- 主内容区域，使用Element Plus的el-main组件 -->
        <!-- router-view是Vue Router的路由视图出口 -->
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
// 使用Vue3的setup语法糖
// 这里可以导入需要的组件或定义逻辑

</script>

<style scoped>
/* 全局样式（建议放在 App.vue 或 main.css） */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden; /* 禁止页面滚动 */
}
/* 应用容器样式 */
.app-container {
  height: 100vh;  /* 视口高度 */
  width: 100%;    /* 100%宽度 */
}

/* 主容器样式 */
.main-container {
  height: 100%;  /* 继承父元素高度 */
}

/* 侧边栏样式 */
.aside {
  background-color: #001529;  /* 深蓝色背景 */
  color: white;               /* 白色文字 */
  height: 100vh;             /* 视口高度 */
  overflow-x: hidden;        /* 隐藏水平滚动条 */
}

/* Logo容器样式 */
.logo-container {
  height: 60px;             /* 固定高度 */
  display: flex;            /* 弹性布局 */
  align-items: center;      /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);  /* 底部边框 */
}

/* Logo标题样式 */
.logo-title {
  color: white;            /* 白色文字 */
  font-size: 16px;         /* 字体大小 */
  margin: 0;               /* 清除外边距 */
  padding: 0 10px;         /* 内边距 */
  white-space: nowrap;     /* 不换行 */
  overflow: hidden;        /* 溢出隐藏 */
  text-overflow: ellipsis; /* 文本溢出显示省略号 */
}

/* 顶部导航栏样式 */
.header {
  background-color: #fff;              /* 白色背景 */
  border-bottom: 1px solid #e6e6e6;    /* 底部边框 */
  display: flex;                       /* 弹性布局 */
  align-items: center;                 /* 垂直居中 */
  justify-content: space-between;     /* 两端对齐 */
  padding: 0 20px;                     /* 左右内边距 */
}

/* 右侧区域样式 */
.header-right {
  display: flex;      /* 弹性布局 */
  align-items: center; /* 垂直居中 */
}

/* 头像容器样式 */
.avatar-container {
  display: flex;      /* 弹性布局 */
  align-items: center; /* 垂直居中 */
  cursor: pointer;    /* 鼠标指针样式 */
}

/* 用户名样式 */
.username {
  margin: 0 8px;      /* 左右外边距 */
  font-size: 14px;     /* 字体大小 */
}

/* 垂直菜单样式 */
.el-menu-vertical {
  border-right: none;  /* 去除右边框 */
}

/* 主内容区域样式 */
.el-main {
  background-color: #f0f2f5;  /* 浅灰色背景 */
  padding: 20px;              /* 内边距 */
}
</style>